<template>
    <div class="goods">
        <van-tabs ref="tabRef" v-model:active="active" @change="onChangeTab">
            <van-tab v-for="(item, index) in props.title" :key="index" :title="item" :name="item">
                <van-pull-refresh v-model="loading" @refresh="onRefresh" success-text="刷新成功">
                    <GoodsItem :list="(newList as CatsTree.myGoods)" />
                </van-pull-refresh>
            </van-tab>
        </van-tabs>
    </div>
</template>

<script lang="ts" setup>
import GoodsItem from './item.vue'
import { ref } from 'vue'
import { type CatsTree } from '@/api';

const props = defineProps<{
    // 需要渲染的标题
    title: string[],
    // 数据
    list: CatsTree.myGoods
}>()

const active = ref(0);
// 下拉
const loading = ref(false);
// 传给item渲染的数据
const newList = ref<CatsTree.myGoods>([])
// 
const tabRef = ref<any>(null)

// 对应名称显示对应数据
function onChangeTab(item: string) {
    console.log('子', props.list);
    if (item === props.title[0]) {

        // 根据标题筛选对应的商品数据
        newList.value = props.list[0] as any
    } else if (item === props.title[1]) {

        // 根据标题筛选对应的商品数据
        newList.value = props.list[1] as any
    } else if (item === props.title[2]) {

        // 根据标题筛选对应的商品数据
        newList.value = props.list[2] as any
    }
}

// 下拉刷新
const onRefresh = () => {
    setTimeout(() => {
        loading.value = false;
    }, 1000);
}
</script>

<style lang="scss" scoped>
.goods {
    height: 100%;
    overflow: hidden;
}

.van-tabs {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

:deep(.van-tabs__nav) {
    height: 100%;
}

:deep(.van-tabs__content) {
    flex: 1;
    overflow-y: auto;
}
</style>